<script setup lang="ts">
defineOptions({name: 'OperateLogSearch'})
import {useI18n} from 'vue-i18n'

const {t} = useI18n()

interface Props {
	enumData?: Record<string, any>
	languageData?: Record<string, any>
}

interface Emits {
	(e: 'search', params: Record<string, any>): void

	(e: 'reset', params: Record<string, any>): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()
const searchFormRef = ref()
const searchFormItems = ref<any>([
	{
		prop: 'operateId', key: 'operateId', type: 'input', placeholder: t('common.inputPlaceholder'),
		clearable: true,
	},
	{
		prop: 'path', key: 'path', type: 'input', placeholder: t('common.inputPlaceholder'),
		clearable: true, precisionAndAmbiguity: ['path', 'pathLike'],
	},
	{prop: 'method', key: 'method', type: 'input', placeholder: t('common.inputPlaceholder'), clearable: true},
	{
		prop: 'params', key: 'paramsLike', type: 'input', placeholder: t('common.inputPlaceholder'),
		clearable: true, precisionAndAmbiguity: ['params', 'paramsLike'],
	},
	{
		prop: 'operateBefore', key: 'operateBeforeLike', type: 'input',
		placeholder: t('common.inputPlaceholder'), clearable: true,
		precisionAndAmbiguity: ['operateBefore', 'operateBeforeLike'],
	},
	{
		prop: 'operateAfter', key: 'operateAfterLike', type: 'input',
		placeholder: t('common.inputPlaceholder'), clearable: true,
		precisionAndAmbiguity: ['operateAfter', 'operateAfterLike'],
	},
	{
		label: t('common.field.createTime'), key: 'createTimeBetween', type: 'datetime', clearable: true,
		toTimestamp: true,
		props: {
			type: 'datetimerange',
			valueFormat: 'YYYY-MM-DD HH:mm:ss',
			rangeSeparator: t('common.dateTimeRange.separator'),
			startPlaceholder: t('common.dateTimeRange.start'),
			endPlaceholder: t('common.dateTimeRange.end')
		}
	}
])

watch(() => props.enumData, (newVal: any) => {
	if (newVal.operateLog) {
		searchFormItems.value.forEach((item: any, index: number) => {
			if (item.prop && newVal.operateLog[item.prop]) {
				searchFormItems.value[index].options = newVal.operateLog[item.prop];
			}
		})
	}
}, {immediate: true});

watch(() => props.languageData, (newVal: any) => {
	if (newVal.operateLog) {
		searchFormItems.value.forEach((item: any, index: number) => {
			if (item.prop && newVal.operateLog.field[item.prop]) {
				searchFormItems.value[index].label = newVal.operateLog.field[item.prop];
				searchFormItems.value[index].placeholder = searchFormItems.value[index].placeholder + newVal.operateLog.field[item.prop];
			}
		})
	}
}, {immediate: true});

/**
 * 处理重置
 * @param filterData
 */
const handleReset = (filterData: any) => emit('reset', filterData)

/**
 * 处理搜索
 * @param filterData
 */
const handleSearch = (filterData: any) => emit('search', filterData)
</script>

<template>
	<ArtSearchBar ref="searchFormRef" :items="searchFormItems" @reset="handleReset" @search="handleSearch"/>
</template>

<style scoped lang="scss">

</style>